<template>
  <div class="outer-container">
    
    <div class="main-container">
      <div class="upload-header">
        <div class="header-content">
          <h1>创作中心</h1>
          <p class="subtitle">分享你的精彩视频</p>
        </div>
      </div>

      <div class="upload-section">
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="uploadForm" 
          label-width="100px" 
          @submit.prevent="submitForm"
          class="upload-form"
        >
          <div class="form-header">
            <div class="step-indicator">
              <div class="step active">
                <i class="fas fa-file-upload"></i>
                <span>上传文件</span>
              </div>
            </div>
          </div>

          <div class="form-content">
            <div class="upload-group">
              <h3 class="group-title">基本信息</h3>
              
              <el-form-item label="剧名" prop="title">
                <el-input 
                  v-model="form.title" 
                  placeholder="请输入作品名称"
                  class="custom-input"
                />
              </el-form-item>

              <el-form-item label="描述详情" prop="description">
                <el-input 
                  type="textarea" 
                  v-model="form.description" 
                  placeholder="添加作品描述，帮助更多人发现你的视频"
                  :rows="4"
                  class="custom-textarea"
                />
              </el-form-item>

              <el-form-item label="主演" prop="actors">
                <el-input 
                  v-model="form.actors" 
                  placeholder="请输入主演名称，多个主演用逗号分隔"
                  class="custom-input"
                />
              </el-form-item>

              <el-form-item label="类型" prop="type">
                <el-select 
                  v-model="form.type" 
                  placeholder="请选择类型"
                  class="custom-select"
                >
                  <el-option
                    v-for="option in typeOptions"
                    :key="option"
                    :label="option"
                    :value="option"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="upload-group">
              <h3 class="group-title">媒体上传</h3>
              
              <el-form-item label="视频文件" prop="videos" class="upload-videos">
                <div class="upload-area" @click="triggerVideoUpload">
                  <input 
                    type="file" 
                    @change="handleVideoUpload" 
                    id="videos" 
                    multiple 
                    style="display: none;"
                  />
                  <div class="upload-placeholder">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>点击或拖拽文件到这里上传</p>
                    <span class="upload-tip">支持 MP4、AVI 等主流格式</span>
                  </div>
                </div>
                <div v-if="form.videos.length > 0" class="file-list">
                  <div v-for="(file, index) in form.videos" :key="index" class="file-item">
                    <i class="fas fa-file-video"></i>
                    <span class="file-name">{{ file.name }}</span>
                    <i class="fas fa-times" @click="removeVideo(index)"></i>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="封面图片" prop="cover">
                <div class="cover-upload">
                  <el-upload
                    class="upload-area"
                    :on-change="handleCoverUpload"
                    :show-file-list="false"
                    :auto-upload="false"
                  >
                    <div v-if="!form.cover" class="upload-placeholder">
                      <i class="fas fa-image"></i>
                      <p>上传封面图片</p>
                      <span class="upload-tip">建议尺寸 16:9</span>
                    </div>
                    <img v-else :src="coverPreview" class="cover-preview"/>
                  </el-upload>
                </div>
              </el-form-item>
            </div>
          </div>

          <div class="form-footer">
            <el-button class="cancel-btn">取消</el-button>
            <el-button type="primary" native-type="submit" class="submit-btn">
              <i class="fas fa-paper-plane"></i>
              发布视频
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const form = ref({
  title: '',
  description: '',
  videos: [],
  cover: null,
  type: '',
  actors: ''
});

const coverPreview = ref('');
const uploadForm = ref(null);

const rules = ref({
  title: [
    { required: true, message: '请输入剧名', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入描述详情', trigger: 'blur' }
  ],
  videos: [
    { required: true, message: '请上传至少一个视频', trigger: 'change' }
  ],
  cover: [
    { required: true, message: '请上传封面图片', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ]
});

const typeOptions = ref([
  '逆袭 亲情 现实 豪门恩怨 家庭',
  '逆袭 甜宠 复仇',
  '虐恋 豪门恩怨',
  '虐恋 豪门恩怨 复仇',
  '闪婚 欢喜冤家 时空之旅',
  '电影',
  '电视剧',
  '综艺',
  '动漫',
  '个人视频'
]);

const userName = localStorage.getItem('userName');

const triggerVideoUpload = () => {
  document.getElementById('videos').click();
};

const handleVideoUpload = (event) => {
  form.value.videos = Array.from(event.target.files);
};

const removeVideo = (index) => {
  form.value.videos.splice(index, 1);
};

const handleCoverUpload = (file) => {
  form.value.cover = file.raw;
  coverPreview.value = URL.createObjectURL(file.raw);
};

const submitForm = async () => {
  uploadForm.value.validate(async (valid) => {
    if (valid) {
      const formData = new FormData();
      formData.append('title', form.value.title);
      formData.append('description', form.value.description);

      form.value.videos.forEach((video) => {
        formData.append('files', video);
      });

      formData.append('username', userName);
      formData.append('type', form.value.type);
      formData.append('actors', form.value.actors);
      formData.append('cover', form.value.cover);

      try {
        const res = await axios.post("http://localhost:9090/apiOne/file/uploadList", formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
        });
        if (res.data.code === '200') {
            ElMessage.success('上传成功');
            form.value = {
              title: '',
              description: '',
              videos: [],
              cover: null,
              type: '',
              actors: ''
            };
            document.getElementById('videos').value = '';
          } else {
            ElMessage.error(res.data.msg || '上传失败');
          }
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  });
};
</script>

<style scoped>
.outer-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #1a1a1a;
  z-index: 1000;
}

.main-container {
  padding-top: 60px;
}

.upload-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 40px 0;
  color: white;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-content h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px;
}

.subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.upload-section {
  max-width: 1200px;
  margin: -40px auto 40px;
  padding: 0 24px;
}

.upload-form {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.form-header {
  margin-bottom: 40px;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #999;
}

.step.active {
  color: #e50914;
}

.step i {
  font-size: 24px;
  margin-bottom: 4px;
}

.step span {
  font-size: 14px;
}

.step-line {
  width: 60px;
  height: 1px;
  background: #eee;
  margin-top: -20px;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.upload-group {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
}

.group-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px;
}

.custom-input :deep(.el-input__wrapper) {
  background: white;
  border: 1px solid #dcdfe6;
  box-shadow: none !important;
}

.custom-textarea :deep(.el-textarea__inner) {
  background: white;
  border: 1px solid #dcdfe6;
  box-shadow: none !important;
}

.custom-select {
  width: 100%;
}

.upload-area {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #e50914;
  background: #fff1f1;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #666;
}

.upload-placeholder i {
  font-size: 40px;
  color: #e50914;
}

.upload-placeholder p {
  font-size: 16px;
  margin: 0;
}

.upload-tip {
  font-size: 12px;
  color: #999;
}

.file-list {
  margin-top: 16px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  margin-bottom: 8px;
}

.file-item i {
  color: #e50914;
}

.file-item .fa-times {
  margin-left: auto;
  cursor: pointer;
  color: #999;
}

.file-item .fa-times:hover {
  color: #e50914;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cover-upload {
  width: 300px;
}

.cover-preview {
  width: 100%;
  height: 169px;
  object-fit: cover;
  border-radius: 8px;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f0f2f5;
}

.cancel-btn {
  min-width: 100px;
}

.submit-btn {
  min-width: 120px;
}

.submit-btn i {
  margin-right: 8px;
}

@media (max-width: 768px) {
  .upload-section {
    padding: 0 16px;
  }

  .upload-form {
    padding: 24px;
  }

  .step-indicator {
    flex-direction: column;
    gap: 16px;
  }

  .step-line {
    width: 1px;
    height: 20px;
    margin: 0;
  }

  .cover-upload {
    width: 100%;
  }
}
</style>
